<template>
  <div>
    <el-main :style="{ '--zoom': zoom }">
      <el-row :gutter="10" style="margin: 0px">
        <el-col :span="14" :xs="24" style="padding: 0">
          <el-row class="form_vt">
            <el-col class="form_top">
              <el-card shadow="never">
                <el-row>
                  <el-col class="f_t_title">企业走访管理
                    <el-button type="primary" round class="xs" @click="table = true">
                      企业信息→</el-button>
                  </el-col>
                  <el-col class="f_t_box">
                    <el-form ref="form" :model="form_admin" :rules="rules" label-width="110px">
                      <el-row :gutter="20">
                        <el-col :span="12" class="xl">
                          <el-form-item label="企业名称" prop="company_name">
                            <el-input :disabled="true" v-model="form_admin.company_name"></el-input>
                          </el-form-item>
                          <el-form-item label="联系人" prop="people">
                            <div class="flex">
                              <el-input v-model="form_admin.people" :disabled="have_visit != 2 ? false : true"></el-input>
                              <el-popover trigger="click" v-if="company_info.business_card">
                                <el-image style="width: 400px; height: 250px" :src="company_info.business_card"
                                  fit="contain"></el-image>
                                <i slot="reference" @click="visible = !visible" class="iconfont icon-1-yonghuguanli"></i>
                              </el-popover>
                            </div>
                          </el-form-item>
                          <el-form-item label="走访人员" v-if="have_visit != 2" prop="work_id">
                            <el-select v-model="form_admin.work_id" filterable multiple placeholder="">
                              <el-option v-for="item in Visitpeoplelist" :key="item.user_id" :label="item.username"
                                :value="item.user_id">
                              </el-option>
                            </el-select>
                          </el-form-item>
                          <el-form-item label="所属区域" v-if="have_visit != 2" required>
                            <el-select style="width: 100%" v-model="StreetId" placeholder="">
                              <el-option v-for="item in StreetList" :key="item.id" :label="item.name" :value="item.id">
                              </el-option>
                            </el-select>
                          </el-form-item>
                        </el-col>
                        <el-col :span="12" class="xl">
                          <el-form-item label="邮箱">
                            <el-input v-model="form_admin.email" :disabled="have_visit != 2 ? false : true"></el-input>
                          </el-form-item>
                          <el-form-item label="联系方式" prop="phone">
                            <el-input v-model="form_admin.phone" :disabled="have_visit != 2 ? false : true"></el-input>
                          </el-form-item>
                          <el-form-item v-if="have_visit != 2" class="Visitdate" label="走访时间" prop="visit_time">
                            <el-col>
                              <!-- <el-date-picker
                                v-if="form_admin.visit_time"
                                type="datetime"
                                placeholder=""
                                v-model="form_admin.visit_time"
                                format="yyyy-MM-dd HH:mm"
                                value-format="yyyy-MM-dd HH:mm"
                                style="width: 100%"
                              >
                              </el-date-picker> -->
                              <el-date-picker type="datetime" placeholder="" v-model="form_admin.visit_time"
                                format="yyyy-MM-dd HH:mm" value-format="yyyy-MM-dd HH:mm" style="width: 100%">
                              </el-date-picker>
                            </el-col>
                          </el-form-item>
                          <!-- <el-form-item
                            v-if="have_visit != 2 && !form_admin.visit_time"
                            class="Visitdate"
                            label="走访时间"
                            prop="visit_time"
                          >
                            <el-col>
                              <el-date-picker
                                type="datetime"
                                placeholder=""
                                v-model="form_admin.v_time"
                                format="yyyy-MM-dd HH:mm"
                                value-format="yyyy-MM-dd HH:mm"
                                style="width: 100%"
                              >
                              </el-date-picker>
                            </el-col>
                          </el-form-item> -->
                        </el-col>
                        <el-col class="xs">
                          <el-form-item label="企业名称" prop="company_name">
                            <el-input :disabled="true" v-model="form_admin.company_name"></el-input>
                          </el-form-item>
                          <el-form-item label="邮箱">
                            <el-input v-model="form_admin.email" :disabled="have_visit != 2 ? false : true"></el-input>
                          </el-form-item>
                          <el-form-item label="联系人" prop="people">
                            <div class="flex">
                              <el-input v-model="form_admin.people" :disabled="have_visit != 2 ? false : true"></el-input>
                              <el-popover trigger="click" v-if="company_info.business_card">
                                <el-image style="width: 400px; height: 250px" :src="company_info.business_card"
                                  fit="contain"></el-image>
                                <i slot="reference" @click="visible = !visible" class="iconfont icon-1-yonghuguanli"></i>
                              </el-popover>
                            </div>
                          </el-form-item>
                          <el-form-item label="联系方式" prop="phone">
                            <el-input v-model="form_admin.phone" :disabled="have_visit != 2 ? false : true"></el-input>
                          </el-form-item>
                          <el-form-item label="走访人员" v-if="have_visit != 2" prop="work_id">
                            <el-select v-model="form_admin.work_id" multiple placeholder="">
                              <el-option v-for="item in Visitpeoplelist" :key="item.user_id" :label="item.username"
                                :value="item.user_id">
                              </el-option>
                            </el-select>
                          </el-form-item>
                          <el-form-item class="Visitdate" v-if="have_visit != 2" label="走访时间" prop="v_time">
                            <el-col>
                              <el-date-picker v-if="form_admin.visit_time" type="datetime" placeholder=""
                                v-model="form_admin.visit_time" format="yyyy-MM-dd HH:mm" value-format="yyyy-MM-dd HH:mm"
                                style="width: 100%">
                              </el-date-picker>
                              <el-date-picker v-else type="datetime" placeholder="" v-model="form_admin.v_time"
                                format="yyyy-MM-dd HH:mm" value-format="yyyy-MM-dd HH:mm" style="width: 100%">
                              </el-date-picker>
                            </el-col>
                          </el-form-item>
                        </el-col>
                      </el-row>
                      <el-form-item label="走访照片" v-if="have_visit != 2" prop="fileList">
                        <el-upload multiple :on-exceed="imgexceed" :action="action" ref="upload1" list-type="picture-card"
                          :on-change="handleChange" :before-upload="beforeAlbumUpload" :file-list="form_admin.fileList"
                          :on-success="onSuccess" accept=".jpg,.jpeg,.png,.gif">
                          <i slot="default" class="el-icon-plus"></i>
                          <div v-loading="file.status == 'uploading'" slot="file" slot-scope="{ file }">
                            <img style="position: absolute" class="el-upload-list__item-thumbnail" :src="file.url"
                              alt="" />
                            <span class="el-upload-list__item-actions">
                              <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                                <i class="el-icon-zoom-in"></i>
                              </span>
                              <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                                <i class="el-icon-delete"></i>
                              </span>
                            </span>
                          </div>
                        </el-upload>
                        <el-dialog :visible.sync="d_img">
                          <img width="100%" :src="dialogImageUrl" alt="" />
                        </el-dialog>
                      </el-form-item>
                      <el-form-item label="企业标签" v-if="have_visit != 2">
                        <div :style="[
                          { 'min-height': adddemandType ? '41px' : '' },
                        ]">
                          <el-tag v-for="item in form_admin.label" :key="item.id + 'enterprise'"
                            class="b_bule bule_active">{{ item.name }}</el-tag>
                        </div>
                        <el-button class="button_from_i" type="primary" round @click="adddemandType = !adddemandType">
                          {{ adddemandType ? "保存标签 —" : "修改标签 +" }}</el-button>
                        <div v-if="adddemandType">
                          <el-tag @click="labelChange(item)" :class="form_admin.label.includes(item) ? 'bule_active' : ''"
                            v-for="item in companylabelList" :key="item.id" class="b_bule">{{ item.name }}</el-tag>
                        </div>
                      </el-form-item>
                      <el-form-item label="知识产权画像" v-if="have_visit != 2" prop="des">
                        <el-input :autosize="{ minRows: 3, maxRows: 10 }" type="textarea" v-model="form_admin.des">
                        </el-input>
                      </el-form-item>
                    </el-form>
                  </el-col>
                </el-row>
              </el-card>
            </el-col>

            <el-col class="form_button">
              <el-card shadow="never">
                <div v-if="form.length">
                  <el-form :ref="'ref' + index" :model="item" label-width="110px" v-for="(item, index) in form"
                    :key="index" :rules="rules2">
                    <el-row>

                      <el-col :span="24">
                        <el-form-item label="需求标签" prop="label">
                          <div>
                            <el-tag v-for="(item_, index_) in form[index].label" :key="item_.id"
                              class="b_bule b_red red_active">{{ item_.name }}</el-tag>
                          </div>
                          <el-button class="button_from_i" type="primary" round @click="adddemandLabel(index)">

                            {{ item.addType ? "保存标签 —" : "添加标签 +" }}</el-button>
                          <div v-if="item.addType">
                            <el-tag @click="labelChange(item_, index)" :class="form[index].label.includes(item_) ? 'red_active' : ''
                              " v-for="(item_, index_) in labelList" :key="item_.id" class="b_bule b_red">{{ item_.name
  }}</el-tag>
                          </div>
                          <!-- <el-button @click="demandDialog = true">666</el-button> -->

                          <el-dialog title="需求标签" :visible.sync="demandDialog" width="30%">
                            <el-collapse v-model="activeNames" @change="collapseChange">
                              <el-collapse-item v-for="(item, index_) in labelList2" :title="item.name" :name="item.id">
                                <el-checkbox-group v-model="checkList" :key="item.id"
                                  @change="checkChange($event, index, index_)">

                                  <el-checkbox v-for="item_ in item.childer" :label="item_.id">{{ item_.name
                                  }}</el-checkbox>
                                </el-checkbox-group>
                              </el-collapse-item>

                            </el-collapse>
                          </el-dialog>
                        </el-form-item>

                        <el-button class="Delete_b" @click="deleteDialog(index)" type="danger" icon="el-icon-close"
                          v-if="have_visit != 2"></el-button>
                      </el-col>
                      <el-col>
                        <el-row class="xs">
                          <el-col>
                            <el-form-item label="解决人" prop="complete.so_id">
                              <el-select value-key="id" v-model="item.complete.so_id" filterable multiple placeholder=""
                                style="width: initial">
                                <el-option v-for="item in SolverList" :key="item.user_id" :label="item.username"
                                  :value="item.user_id">
                                </el-option>
                              </el-select>
                            </el-form-item>
                          </el-col>
                          <el-form-item label="需求标签">
                            <div>
                              <el-tag v-for="(item_, index_) in form[index].label" :key="item_.id"
                                class="b_bule b_red red_active">{{ item_.name }}</el-tag>
                            </div>
                            <el-button class="button_from_i" type="primary" round @click="item.addType = !item.addType">
                              {{ item.addType ? "保存标签 —" : "添加标签 +" }}</el-button>
                            <div v-if="item.addType">
                              <el-tag @click="labelChange(item_, index)" :class="form[index].label.includes(item_) ? 'red_active' : ''
                                " v-for="(item_, index_) in labelList" :key="item_.id" class="b_bule b_red">{{
    item_.name }}</el-tag>
                            </div>
                          </el-form-item>
                          <el-form-item class="" label="期望解决时间" prop="solve_time">
                            <el-date-picker type="datetime" placeholder="" v-model="item.solve_time"
                              format="yyyy-MM-dd HH:mm" style="min-width: 27%" value-format="yyyy-MM-dd HH:mm"
                              @change="pickerOnClick">
                            </el-date-picker>
                          </el-form-item>
                        </el-row>
                      </el-col>
                      <el-col class="qw_date xl">
                        <el-row>
                          <el-col>
                            <el-form-item label="解决人" prop="complete.so_id">
                              <el-select value-key="id" v-model="item.complete.so_id" filterable multiple placeholder=""
                                style="width: initial">
                                <el-option v-for="item in SolverList" :key="item.user_id" :label="item.username"
                                  :value="item.user_id">
                                </el-option>
                              </el-select>
                            </el-form-item>
                          </el-col>
                        </el-row>

                        <!-- <el-form-item label="需求标签">
                          <div>
                            <el-tag
                              v-for="(item_, index_) in form[index].label"
                              :key="item_.id"
                              class="b_bule b_red red_active"
                              >{{ item_.name }}</el-tag
                            >
                          </div>
                          <el-button
                            class="button_from_i"
                            type="primary"
                            round
                            @click="item.addType = !item.addType"
                          >
                            {{ item.addType ? "保存标签 —" : "添加标签 +" }}</el-button
                          >
                          <div v-if="item.addType">
                            <el-tag
                              @click="labelChange(item_, index)"
                              :class="
                                form[index].label.includes(item_) ? 'red_active' : ''
                              "
                              v-for="(item_, index_) in labelList"
                              :key="item_.id"
                              class="b_bule b_red"
                              >{{ item_.name }}</el-tag
                            >
                          </div>
                        </el-form-item> -->
                        <el-form-item :label="'企业需求' + (index + 1)" prop="des">
                          <el-input :autosize="{ minRows: 3, maxRows: 10 }" type="textarea" v-model="item.des">
                          </el-input>
                        </el-form-item>
                        <el-form-item class="" label="期望解决时间" prop="solve_time">
                          <el-date-picker type="datetime" placeholder="" v-model="item.solve_time" style="min-width: 27%"
                            format="yyyy-MM-dd HH:mm" value-format="yyyy-MM-dd HH:mm">
                          </el-date-picker>
                        </el-form-item>
                      </el-col>
                      <el-col v-if="addPlanArr[index]">
                        <div>
                          <el-row :gutter="20">
                            <el-col :span="12" :xs="24">
                              <el-form-item label="解决时间">
                                <el-date-picker type="datetime" value-format="yyyy-MM-dd HH:mm" placeholder=""
                                  format="yyyy-MM-dd HH:mm" :disabled="true" v-model="form[index].complete.so_time"
                                  style="width: ">
                                </el-date-picker>
                              </el-form-item>
                            </el-col>
                          </el-row>
                        </div>

                        <el-form-item label="解决方案">
                          <el-input disabled type="textarea" v-model="form[index].complete.solve_des"
                            :autosize="{ minRows: 3, maxRows: 10 }">
                          </el-input>
                        </el-form-item>

                        <el-form-item label="解决方案附件" class="upload_box">
                          <el-upload class="upload-demo1" action="" :disabled="true" :on-preview="ClickProgramme"
                            :file-list="form[index].complete.fileList" :auto-upload="false">
                            <el-button class="button_from_i" slot="trigger" size="small" type="primary">解决方案 +</el-button>
                            <!-- <el-button class="button_from_i" slot="trigger" size="small" type="primary">解决方案 +</el-button> -->
                          </el-upload>
                        </el-form-item>
                      </el-col>
                      <el-col :offset="16" :span="8" class="bo_primary">
                        <div class="primary_box" v-if="addPlanArr[index]">
                          <el-button size="mini" class="xl" style="width: 50%" type="info" round
                            @click="addprogramme(index, item)">修改
                          </el-button>
                        </div>
                        <div v-else style="margin-left: 50%">
                          <el-button class="button_from_i bo_primary_i xl" type="primary" round style="width: 50%"
                            @click="addprogramme(index, item)">添加解决方案 +</el-button>
                        </div>
                      </el-col>
                      <el-col class="bo_primary">
                        <div class="primary_box" v-if="addPlanArr[index]">
                          <el-button size="mini" style="width: 50%" class="xs" type="info" round
                            @click="addprogramme(index, item)">修改
                          </el-button>
                        </div>
                        <el-button v-else class="button_from_i bo_primary_i xs" style="margin-top: 15px" type="primary"
                          round @click="addprogramme(index, item)">添加解决方案 +
                        </el-button>
                      </el-col>
                    </el-row>
                    <el-divider></el-divider>
                  </el-form>
                </div>
                <el-button class="button_from_i" type="primary" v-if="have_visit != 2" round @click="add_demand">新增新需求
                  +</el-button>
              </el-card>
            </el-col>
            <el-col class="b_bon">
              <el-button class="preservation_b" type="primary" @click="onSubmit('form')">保存</el-button>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="10" class="xl">
          <drawerVisit @update="update" :status_agent="status_agent" :status_update="status_update" :table="table"
            :company_id="company_id" :form_admin="form_admin"></drawerVisit>
        </el-col>
      </el-row>
    </el-main>

    <el-drawer title="企业信息" :visible.sync="table" direction="rtl" size="90%" :before-close="close">
      <drawerVisit @update="update" :status_agent="status_agent" :status_update="status_update" :table="table"
        :company_id="company_id" :form_admin="form_admin"></drawerVisit>
    </el-drawer>

    <el-dialog v-if="form.length" title="添加解决方案" :visible.sync="d_add" @close="closeDialog">
      <el-form :model="form[addNum].complete" label-width="100px">

        <div>
          <el-row :gutter="20">

            <el-col :span="12" :xs="24">
              <el-form-item label="解决时间">
                <el-date-picker type="datetime" value-format="yyyy-MM-dd HH:mm" placeholder="" format="yyyy-MM-dd HH:mm"
                  v-model="form[addNum].complete.so_time" style="min-width: 27%">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
        </div>

        <el-form-item label="解决方案">
          <el-input type="textarea" v-model="form[addNum].complete.solve_des" :autosize="{ minRows: 3, maxRows: 10 }">
          </el-input>
        </el-form-item>

        <el-form-item label="解决方案附件" class="upload_box">
          <el-upload :limit="1" id="b_upload" class="upload-demo" :action="action" :on-change="upload_success"
            :on-remove="removeProgramme" :file-list="form[addNum].complete.fileList" :before-upload="SolutionUpload">
            <el-button class="button_from_i" slot="trigger" size="small" type="primary">解决方案 +</el-button>
          </el-upload>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button type="info" @click="d_add_empty = true">取消</el-button>
        <el-button type="primary" @click="preservation">保存</el-button>
      </span>

      <el-dialog append-to-body title="警告" :visible.sync="d_add_empty" width="15%">
        <span>取消将清空已输入的内容！</span>
        <span slot="footer" class="">
          <el-button size="mini" @click="d_add_empty = false">取 消</el-button>
          <el-button size="mini" type="primary" @click="empty">确 定</el-button>
        </span>
      </el-dialog>
    </el-dialog>

    <el-dialog title="警告" :visible.sync="delete_Form" width="30%">
      <span>是否删除该需求！</span>
      <span slot="footer" class="">
        <el-button size="mini" @click="delete_Form = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="deleteForm()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  staff,
  demandInfo,
  companyLabel,
  demandEdit,
  editVisit,
  demandLabel,
  visitDetail,
  visitStreet,
  demandLabelTwo
} from "@/api/configApi"
import {
  demandDel,
} from "@/api/newuser";
import { VUE_APP_BASE_API } from "@/config.js";
import drawerVisit from "./components/drawerVisit.vue";
import Visitpatent from "./components/Visitpatent.vue";
export default {
  data() {
    return {
      region_id: this.$store.state.user.region_id,
      zoom: 1,
      status_agent: null, //0表示没有 1表示数据库有这个信息   需要调用天眼查接口
      status_update: null, //0表示不需要更新了，1表示需要更新 调用天眼查接口
      company_id: null,
      action: `${VUE_APP_BASE_API}/v1/config/upload`,
      user_id: this.$store.state.user.id,
      adddemandType: false,
      adddenterprise: false,
      delete_Form: false,
      d_add_empty: false,
      company_info: {},
      table: false,
      d_add: false,
      StreetId: "",
      dialogImageUrl: "",
      d_img: false,
      disabled: false,
      visible: false,
      StreetList: [],
      // defaultLabel: [],
      labelList: [],
      labelList2: [],
      companylabelList: [],
      activeName: "basic",
      Visitpeoplelist: [], //走访人员
      SolverList: [], //解决人员
      form_admin: {
        //走访管理
        company_name: "",
        people: "",
        work_id: [],
        email: "",
        phone: "",
        v_time: "",
        visit_time: "",
        des: "",
        label: [],
        fileList: [],
      },
      form: [

      ],
      fileList: [],
      addNum: 0,
      addPlanArr: [
        // false
      ],
      rules: {
        company_name: [{ required: true, message: "请输入企业名称", trigger: "blur" }],
        people: [{ required: true, message: "请输入联系人", trigger: "blur" }],
        work_id: [{ required: true, message: "请选择走访人员", trigger: "blur" }],
        phone: [{ required: true, message: "请输入联系方式", trigger: "blur" }],
        visit_time: [{ required: true, message: "请选择走访时间", trigger: "blur" }],
        des: [{ required: true, message: "请输入知识产权画像", trigger: "blur" }],
        // fileList: [{ required: true, message: "请上传走访照片", trigger: "blur" }],
      },
      rules2: {
        label: [{ required: true, message: "请选择需求标签", trigger: "blur" }],
        solve_time: [{ required: true, message: "请选择期望解决时间", trigger: "blur" }],
        "complete.so_id": [{ required: true, message: "请选择解决人", trigger: "blur" }],
      },
      have_visit: 1,
      demandDialog: false,
      activeNames: [],
      checkList: [],
      checkListIndex: 0,


    };
  },
  components: {
    drawerVisit,
    Visitpatent,
  },
  //监听his.form_admin.label
  watch: {},
  mounted() {
    this.staff();
    this.demandLabelTwo();
    if (this.$route.query.have_visit != 2) {
      this.visitDetail();
      this.visitStreet();

      // let width = document.documentElement.clientWidth || document.body.clientWidth;
      // this.zoom = width / 1920;
    } else {
      this.have_visit = this.$route.query.have_visit;
      this.demandInfo();
    }
  },
  methods: {
    demandLabelTwo() {
      demandLabelTwo().then(res => {
        this.labelList2 = res
        this.activeNames = [res[0].id]
        console.log(res, '阿萨大大撒旦', this.activeNames);
      })
    },
    collapseChange(val) {
      console.log(val);
    },
    async visitStreet() {
      let data = await visitStreet({
        region_id: this.region_id
      });
      console.log(data);
      this.StreetList = data.list;
    },
    demandInfo() {
      demandInfo({
        demand_id: this.$route.query.id,
      }).then((res) => {
        //
        console.log(res, '我在这里');
        this.form_admin.company_name = res.company_info.company;
        this.form_admin.email = res.company_info.email;
        this.form_admin.people = res.company_info.username;
        this.form_admin.phone = res.company_info.mobile;

        this.status_agent = res.status.status_agent;
        this.status_update = res.status.status_update;
        this.company_id = res.res.company_id;

        this.add_demand();

        this.form[0].id = res.res.id;
        this.form[0].des = res.res.des;
        this.form[0].solve_time = res.res.solve_time;
        this.$set(this.form[0], "solve_time", res.res.solve_time);
        this.demandLabel(0, res.res.label_arr);
        if (res.res.solve_file && res.res.solve_file.length > 2) {
          this.form[0].complete.fileList.push({
            url: res.res.solve_file,
            name: res.res.solve_name,
          });
        }
        if (res.res.status == 1) {
          this.addPlanArr[0] = true;
        }
        if (res.res.so_id.length == 0) {
          this.form[0].complete.so_id = [];
        } else {
          this.form[0].complete.so_id = res.res.so_id.split(",").map((item) => {
            if (item) {
              return Number(item);
            }
          });
        }
        this.form[0].complete.solve_des = res.res.solve_des;
        this.form[0].complete.so_time = res.res.so_time;
      });
    },
    pickerOnClick(fun) {
      console.log(fun);
    },
    update() {
      this.visitDetail();
    },
    companyLabel(label_name) {
      //企业标签
      companyLabel({
        region_id: this.region_id
      }).then((res) => {
        this.companylabelList = res.list;
        this.companylabelList.map((res_, index) => {
          label_name.map((res_1, index) => {
            if (res_1.id == res_.id) {
              this.form_admin.label.push(res_);
            }
          });
        });
      });
    },
    demandLabel(index, label_arr) {
      //需求标签获取
      demandLabel({
        region_id: this.region_id
      }).then((res) => {
        this.labelList = res.list;
        this.labelList.map((res_, index_) => {
          label_arr.map((res_1) => {
            if (res_1.id == res_.id) {
              this.form[index].label.push(res_);
            }
          });
        });
      });
    },
    staff(type) {
      //走访人员列表
      staff({
        region_id: this.region_id
      }).then((res) => {
        this.Visitpeoplelist = res.list;
        this.SolverList = res.list;
      });
    },
    visitDetail() {
      visitDetail({
        visit_id: this.$route.query.id,
        demand_id: this.$route.query.demand_id ? this.$route.query.demand_id : "",
      }).then((res) => {
        // 天集社更新状态
        this.status_agent = res.status.status_agent;
        this.status_update = res.status.status_update;

        this.StreetId = res.company_info.street_id == 0 ? '' : res.company_info.street_id;
        console.log(this.StreetId, 'this.StreetId', res);
        this.form_admin.company_name = res.company_info.company;
        this.company_info = res.company_info;
        this.form_admin.people = res.list.people;
        this.form_admin.work_id =
          res.list.work_id &&
          res.list.work_id.split(",").map((item) => {
            return Number(item);
          });

        let imgList = [];
        if (res.list.images) {
          res.list.images.map((res_) => {
            let imgObj = {
              url: "",
            };
            imgObj.url = res_;
            imgList.push(imgObj);
          });
        }
        this.form_admin.fileList = imgList;
        this.form_admin.email = res.list.email;
        this.form_admin.phone = res.list.phone;
        // this.form_admin.v_time = res.list.v_time;
        this.$set(this.form_admin, "v_time", res.list.v_time);
        this.form_admin.visit_time = res.list.visit_time;
        this.form_admin.des = res.list.des;
        // this.defaultLabel = res.label.label;
        this.companyLabel(res.label.label);
        this.company_id = res.company_info.id;

        if (res.demand.length) {
          for (let i = 0; i < res.demand.length - 1; i++) {
            this.add_demand();
          }
        }
        if (res.demand.length > 0) {
          this.add_demand();
          res.demand.map((res, index) => {
            this.form[index].id = res.id;
            this.form[index].des = res.des;
            this.form[index].solve_time = res.solve_time;
            this.$set(this.form[index], "solve_time", res.solve_time);
            // if (index == 0) {
            //只请求一次全部列表
            this.demandLabel(index, res.label_arr);
            // }
            if (res.solve_file && res.solve_file.length > 2) {
              this.form[index].complete.fileList.push({
                url: res.solve_file,
                name: res.solve_name,
              });
            }
            if (res.status == 1) {
              this.addPlanArr[index] = true;
            }
            if (res.so_id.length == 0) {
              this.form[index].complete.so_id = [];
            } else {
              this.form[index].complete.so_id = res.so_id.split(",").map((item) => {
                if (item) {
                  return Number(item);
                }
              });
            }

            this.form[index].complete.solve_des = res.solve_des;
            this.form[index].complete.so_time = res.so_time;
          });
        } else {
          this.demandLabel(0, []);
        }
      });
    },
    adddemandLabel(index) {
      this.checkList = []
      this.checkListIndex = index
      console.log(this.checkListIndex);
      this.form[index].label.map(res => {
        this.checkList.push(res.id)
      })
      console.log(this.checkList);
      this.demandDialog = true
    },
    checkChange(event, index, index_) {
      console.log(event, index, index_);
      console.log(this.checkList);
      console.log(this.labelList2);
      let label = []
      this.labelList2.map(res => {
        res.childer.map(res_ => {
          this.checkList.map(res_1 => {
            if (res_1 == res_.id) {
              label.push(res_)
            }
          })
        })
      })
      this.form[this.checkListIndex].label = label
    },
    labelChange(item, index) {
      if (index != undefined) {
        if (this.form[index].label.includes(item)) {
          this.form[index].label.splice(this.form[index].label.indexOf(item), 1);
        } else {
          this.form[index].label.push(item);
        }
      } else {
        if (this.form_admin.label.includes(item)) {
          this.form_admin.label.splice(this.form_admin.label.indexOf(item), 1);
        } else {
          this.form_admin.label.push(item);
        }
      }
    },
    preservation() {
      this.addPlanArr.splice(this.addNum, 1, true);
      this.addNum = 0;
      this.d_add = false;
    },
    closeDialog() {
      this.addNum = 0;
      this.d_add = false;
    },
    empty() {
      this.form[this.addNum].complete = {
        solve_des: "",
        so_id: [],
        so_time: "",
        fileList: [],
      };
      let b_dom = document.getElementById("b_upload").getElementsByClassName("el-upload");

      b_dom[0].style.display = "inline-block";

      this.addNum = 0;
      this.d_add_empty = false;
      this.d_add = false;
    },
    deleteDialog(index) {
      this.delete_Form = true;
      this.addNum = index;
    },
    deleteForm(index) {
      if (this.form[this.addNum].id) {
        demandDel({
          demand_id: this.form[this.addNum].id
        }).then(res => {
          this.$message({
            message: "删除成功",
            type: "success",
          });
        })
      }
      this.form.splice(this.addNum, 1);
      this.addPlanArr.splice(this.addNum, 1);
      this.addNum = 0;
      this.delete_Form = false;
    },
    close() {
      this.table = false;
    },
    add_demand() {
      let obj = {
        id: null,
        Visitdate: "",
        des: "",
        label: [],
        complete: {
          solve_des: "",
          so_id: [],
          so_time: "",
          fileList: [],
        },
        addType: false,
        solve_time: "",
      };
      this.addPlanArr.push(false);
      this.form.push(obj);
    },
    handleClick() { },
    onSubmit(formName) {
      if (this.have_visit != 2) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if (this.form.length) {
              let success = true
              this.form.map((res, index) => {
                this.$refs["ref" + index][0].validate((valid1) => {
                  if (valid1) {

                    console.log(index);
                  } else {
                    success = false
                    this.$message.error("请完善需求表单信息，若无需求请删除后保存");
                    return false;
                  }
                });
              });

              if (success) {
                this.confirmInfo();
              }

            } else {
              console.log("提交无需求");
              this.confirmInfo();
            }
          } else {
            this.$message.error("请填写完整信息");
            return false;
          }
        });
      } else {
        this.form.map((res, index) => {
          this.$refs["ref" + index][0].validate((valid1) => {
            if (valid1) {
              this.oneDemand(index);
            } else {
              this.$message.error("请完善需求表单信息");
              return false;
            }
          });
        });
      }
    },
    oneDemand(index) {
      console.log(this.form, "this.form");
      console.log(this.form[index].complete.fileList, "this.form");

      let name = ''
      let url = ''
      console.log(this.form[index].complete.fileList[index]);
      if (this.form[index].complete.fileList[index]) {
        name = this.form[index].complete.fileList[index].response ? this.form[index].complete.fileList[index].response.data.name : this.form[index].complete.fileList[index].name
        url = this.form[index].complete.fileList[index].response ? this.form[index].complete.fileList[index].response.data.url : this.form[index].complete.fileList[index].url
      }

      let form = {
        demand_id: this.$route.query.id,
        des: this.form[index].des,
        label: this.form[index].label
          .map((item) => {
            return Number(item.id);
          })
          .join(","),
        solve_time: this.form[index].solve_time,
        so_id: this.form[index].complete.so_id
          .map((item) => {
            return item;
          })
          .join(","),
        so_time: this.form[index].complete.so_time,
        // so_time: '',
        solve_des: this.form[index].complete.solve_des,
        solve_name: name,
        solve_file: url,
      };
      console.log(form, "form");

      demandEdit(form).then(res => {
        console.log(res);
        this.$message({
          message: "修改成功",
          type: "success",
        });
        this.$router.go(-1);
      })
    },
    confirmInfo() {
      let newimages;
      let uploading = false;
      newimages = this.form_admin.fileList
        .map((item) => {
          if (item.status == "uploading") {
            this.$message.error("图片正在上传，请稍后再试");
            uploading = true;
            return;
          }
          console.log(item);
          if (item.response) {
            return item.response.data.url;
          } else {
            return item.url;
          }
        })
        .join(",");

      if (uploading) return;

      let demandObj = [
        {
          id: null,
          label: "",
          solve_time: "",
          des: "",
          so_id: Number,
          so_time: "",
          solve_des: "",
          solve_file: "",
        },
      ];
      let pushForm = [...this.form]
      if (this.form.length) {
        if (this.form.length == 1) {
        } else {
          for (let i = 0; i < this.form.length - 1; i++) {
            demandObj.push({
              id: null,
              label: "",
              solve_time: "",
              des: "",
              so_id: Number,
              so_time: "",
              solve_des: "",
              solve_file: "",
            });
          }
        }
      } else {
        pushForm = [
          {
            //需求管理
            id: null,
            solve_time: "",
            des: "",
            label: [],
            complete: {
              solve_des: "",
              so_id: [],
              so_time: "",
              fileList: [],
            },
            addType: false,
          },
        ];
      }

      demandObj.map((item, index) => {
        item.id = Number(pushForm[index].id);
        item.label = pushForm[index].label
          .map((res) => {
            return Number(res.id);
          })
          .join(",");
        item.solve_time = pushForm[index].solve_time;
        item.des = pushForm[index].des;

        item.so_id = pushForm[index].complete.so_id.join(",");
        item.so_time = pushForm[index].complete.so_time;
        item.solve_des = pushForm[index].complete.solve_des;
        item.solve_file = pushForm[index].complete.fileList
          .map((item) => {
            if (item.response) {
              return item.response.data.url;
            } else {
              return item.url;
            }
          })
          .join(",");
        item.solve_name = pushForm[index].complete.fileList
          .map((item) => {
            if (item.response) {
              return item.name;
            } else {
              return item.name;
            }
          })
          .join(",");
      });

      let newform = {
        id: Number(this.$route.query.id),
        people: this.form_admin.people,
        phone: this.form_admin.phone,
        email: this.form_admin.email,
        images: newimages,
        des: this.form_admin.des,
        visit_time: this.form_admin.visit_time
          ? this.form_admin.visit_time
          : this.form_admin.v_time,
        company_id: this.company_id,
        street_id: this.StreetId,
        demand: demandObj,
        label: this.form_admin.label
          .map((item) => {
            return Number(item.id);
          })
          .join(","),
        work_id: this.form_admin.work_id
          .map((item) => {
            return Number(item);
          })
          .join(","),
      };
      editVisit(newform).then((res) => {
        this.$message({
          message: "修改成功",
          type: "success",
        });
        this.$router.go(-1);

      });
    },
    addprogramme(index, item) {
      if (item.des && item.solve_time) {
        this.addNum = index;
        this.d_add = true;
        if (this.form[index].complete.fileList.length == 0) {
          this.$nextTick(() => {
            let b_dom = document
              .getElementById("b_upload")
              .getElementsByClassName("el-upload");
            b_dom[0].style.display = "inline-block";
          });
        } else {
          this.$nextTick(() => {
            let b_dom = document
              .getElementById("b_upload")
              .getElementsByClassName("el-upload");
            b_dom[0].style.display = "none";
          });
        }
      } else {
        if (!item.des) {
          this.$message.error("请填写需求");
        } else if (!item.solve_time) {
          this.$message.error("请填写解决时间");
        }
      }
    },
    removeProgramme(file) {
      let b_dom = document.getElementById("b_upload").getElementsByClassName("el-upload");
      b_dom[0].style.display = "inline-block";
      this.form[this.addNum].complete.fileList = [];
    },
    handleRemove(file) {
      // 1.获取将要删除图片的临时路径
      const filePath = file.url;
      // 2.从pics数组中，找到图片对应的索引值
      const i = this.form_admin.fileList.findIndex((x) => x.url === filePath);
      // 3.调用splice方法，移除图片信息
      this.form_admin.fileList.splice(i, 1);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.d_img = true;
    },
    handleChange(file, fileList) {
      this.form_admin.fileList = fileList;

      console.log(this.form_admin.fileList, 6666, file, fileList);
    },
    onSuccess(response, file, fileList) {
      this.$message({
        message: "上传成功",
        type: "success",
      });
      this.form_admin.fileList = fileList;

      console.log(response, file, fileList, "上传成功");
    },
    imgexceed() {
      this.$message.error("最大上传四张图片!");
    },
    beforeAlbumUpload(file) {
      //上传前验证
      const isIMG = file.type.slice(0, 5) === "image";
      if (!isIMG) {
        this.$message.error("请上传图片!");
      }
      return isIMG;
    },
    SolutionUpload(file) {
      const isIMG = file.type.slice(0, 5) === "image";
      if (isIMG) {
        this.$message.error("请上传文件!");
      }
      return !isIMG;
    },

    upload_success(file, fileList) {
      this.form[this.addNum].complete.fileList = fileList;
      let b_dom = document.getElementById("b_upload").getElementsByClassName("el-upload");
      b_dom[0].style.display = "none";
    },
    ClickProgramme(file) {
      if (file.response) {
        window.open(file.response.data.url);
      } else {
        window.open(file.url);
      }
    },
  },
  //销毁前
  beforeDestroy() {
    localStorage.removeItem("PatentNumber");
  },
};
</script>

<style scoped lang="less">
::v-deep .el-dialog__body {
  padding: 10px 20px;
}

::v-deep .el-upload-list__item {
  .el-loading-parent--relative {
    width: 100%;
    height: 100%;
  }
}

::v-deep .el-drawer__header {
  margin-bottom: 20px;
  display: none;
}

.el-main {
  zoom: var(--zoom);
}

::v-deep .el-form-item .el-form-item__label {
  font-size: 16px;
  width: 100px;
  font-weight: initial;
  text-align: initial;
}

.icon-1-yonghuguanli {
  font-size: 34px;
  width: 50px;
  display: flex;
  justify-content: center;
}

::v-deep .el-select {
  width: 100%;
}

::v-deep .el-input__inner {
  height: 38px;
  line-height: 38px;
  font-size: 16px;
}

::v-deep .Visitdate .el-form-item__content .el-col {
  padding: 0 !important;
}

::v-deep .qw_date .el-form-item__label {
  width: 120px !important;
  margin-left: 120px;
}

::v-deep .qw_date .el-form-item__content .el-date-editor {
  width: 150px;
}


::v-deep .card_v .el-card__body {
  padding: 0;

  .el-tabs .el-tabs__content {
    padding: 0 20px;

    tr th {
      font-size: 16px;
    }

    tr td {
      font-size: 16px;
    }
  }
}

.d_boreder {
  border-bottom: 5px solid #eeeff2;
  margin-bottom: 20px;
}

::v-deep .descriptions_1 .el-descriptions__body .el-descriptions__table tbody:nth-child(1) {
  tr:nth-child(1) {
    color: #808596;
  }

  tr:nth-child(2) {
    color: #4682d7;
  }
}

::v-deep .el-descriptions__body .el-descriptions__table tbody tr:nth-child(1) th {
  padding-bottom: 0;
}

.b_bon {
  margin: 20px 0;
  display: flex;
}

.button_from_i {
  min-width: 161px;
  height: 38px;
  line-height: 0px;
  font-size: 14px;
  color: #3377ff;
  background-color: #ebf2ff;
  border: 1px solid #387dff;
  border-radius: 30px;
}

.el-main {
  margin-right: 15px;
  border-radius: 5px;
  margin: 25px 30px 0 30px;
  background-color: #f4f5f7;
}

.f_t_title {
  font-weight: bolder;
  font-size: 24px;
  margin-bottom: 25px;

  button {
    float: right;
    padding: 9px 15px;
  }
}

.b_bule {
  background-color: #d3e2ff;
  margin: 3px 5px;
  border-radius: 5px;
  color: #4585ff;
  font-size: 14px;
  height: 20px;
  line-height: 20px;
  border: 0;
  cursor: pointer;
}

.b_red {
  color: #ff5f58;
  background-color: #fff6f5;
}

.b_red2 {
  color: #ffffff;
  background-color: #ff5f58;
}

.bule_active {
  background-color: #387dff;
  color: #fff;
}

.red_active {
  color: #fff6f5 !important;
  background-color: #ff5f58 !important;
}

.bo_primary {
  display: flex;
  justify-content: center;
  flex-direction: column;

  ::v-deep .primary_box {
    height: 100%;
    display: flex;
    justify-content: space-around;
    flex-direction: unset;

    .el-button {
      height: 30px;
      margin-left: 10px;
      width: 100%;
    }
  }
}

::v-deep .primary_box {
  .xs {
    width: 100%;
    margin: 5px 0;
  }
}

.Delete_b {
  position: absolute;
  top: -10px;
  left: 0px;
  padding: 2px 3px;
}

.form_top {
  margin-bottom: 15px;
}

.bo_primary_i {
  margin-left: 5px;
  background-color: #387dff;
  color: #ffffff;
}

.preservation_b {
  margin: 0;
  color: #fff;
  padding: 5px 35px;
  width: 139px;
  height: 38px;
  background: #387dff;
  border: 1px solid #e8ecef;
  border-radius: 19px;
  font-size: 16px;
}

::v-deep .upload_box .el-form-item__label {
  padding: 0;
}

.dialog-footer {
  button {
    padding: 5px 30px;
    width: 139px;
    height: 38px;
    border: 1px solid #e8ecef;
    border-radius: 19px;
    font-size: 16px;
  }
}

::v-deep .el-dialog {
  border-radius: 10px;
}

::v-deep .el-dialog__header {
  .el-dialog__title {
    font-size: 22px;
    font-weight: bolder;
  }

  .el-dialog__headerbtn {
    i {
      position: absolute;
      border: 3px solid #fff;
      top: -50px;
      left: 30px;
      color: #fff;
      border-radius: 30px;
      font-size: 24px;
      font-weight: bolder;
    }
  }
}

.xs {
  display: none;
}

.xl {
  display: block;
}

::v-deep .el-dialog__body {
  .qw_date .el-form-item__label {
    margin-left: 120px;
  }

  .el-form {
    .el-form-item {
      .el-form-item__label {}

      .el-form-item__content {}
    }
  }
}

::v-deep .upload-demo1 {
  .el-upload {
    display: none;
  }
}

@media (max-width: 1360px) {}

@media (max-width: 1280px) {}

@media (max-width: 768px) {
  ::v-deep .qw_date .el-form-item__content .el-date-editor {
    width: 100%;
  }

  .el-main {
    margin: 0;
    padding: 0;
  }

  .xs {
    display: block;
  }

  .xl {
    display: none;
  }

  .b_bon {
    margin: 20px 0;
    display: flex;
    justify-content: flex-end;
    padding: 0 20px;
  }

  ::v-deep .el-dialog__header {
    .el-dialog__headerbtn {
      i {
        position: initial;
        border: 3px solid #fff;
        top: -50px;
        left: 30px;
        color: #909399;
        border-radius: 30px;
        font-size: 24px;
        font-weight: bolder;
      }
    }
  }

  ::v-deep .el-dialog__body {
    .el-form {
      .el-form-item {
        .el-form-item__label {
          width: 60px !important;
          line-height: 20px !important;
        }

        .el-form-item__content {
          margin-left: 60px !important;
        }
      }

      .qw_date {
        .el-form-item {
          .el-form-item__label {
            margin: 0;
            width: 100px !important;
            margin-left: 100px !important;
          }

          .el-form-item__content {
            .el-date-editor {
              width: 100%;
            }
          }
        }
      }
    }
  }
}</style>
